<template>
  <el-dialog
          :model-value="visible"
          title="编辑"
          @close="dialogClose"
          width="50%"
  >
     <el-form :model="row" ref="formRef" :rules="formRules" label-width="100px">
        <el-form-item label="任务名称：" prop="name">
          <el-input v-model="row.name"></el-input>
        </el-form-item>
        <el-form-item label="脚本名称：" prop="command">
          <el-input v-model="row.command" placeholder="示例：cron_script.sh或cron_script.py"></el-input>
        </el-form-item>
        <el-form-item label="执行频率：" prop="schedule">
          <el-input v-model="row.schedule" placeholder="示例：*/5 * * * *"></el-input>
        </el-form-item>
        <el-form-item label="目标主机：" prop="server_ids">
            <el-select class="m-2" filterable v-model="row.server_ids" @click="getServer" multiple placeholder="请选择" style="width: 100%">
              <el-option v-for="row in server" :key="row.id" :label="row.name" :value="row.id">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="脚本内容：" prop="cron_script">
            <div ref="cron_script" class="ace-editor"></div>
        </el-form-item>
        <el-form-item label="备注：" prop="note">
          <el-input v-model="row.note" type="textarea"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>

  </el-dialog>
</template>

<script>
    import ace from 'ace-builds/src-noconflict/ace';
    export default {
        props: {
            visible: Boolean,
            row: '',  // 当前行内容
        },
        data() {
            return {
                server: '',
                formRules: {
                    name: [
                        {required: true, message: '请输入任务名称', trigger: 'blur'},
                        {min: 2, message: '任务名称长度应不小于2个字符', trigger: 'blur'}
                    ],
                    command: [
                        {required: true, message: '请输入脚本名称', trigger: 'blur'},
                        {min: 2, message: '脚本名称长度应不小于2个字符', trigger: 'blur'}
                    ],
                     schedule: [
                        {required: true, message: '请输入执行频率', trigger: 'blur'},
                        {min: 2, message: '执行频率长度应不小于2个字符', trigger: 'blur'}
                    ],
                     server_ids: [
                        {required: true, message: '请选择目标主机', trigger: 'blur'},
                    ],
                     cron_script: [
                        {required: true, message: '请输入执行脚本', trigger: 'blur'},
                        {min: 2, message: '执行脚本长度应不小于2个字符', trigger: 'blur'}
                    ],
                },
            }
        },
        methods: {
          dialogClose() {
            this.$emit('update:visible', false);  // 当对话框关闭，通过父组件更新为false
            this.$parent.getData();
          },
          //初始化ace编辑器
           initEditor() {
              const editor = ace.edit(this.$refs.cron_script);
              editor.setTheme('ace/theme/monokai'); // 设置主题
              editor.getSession().setMode('ace/mode/javascript'); // 设置语言模式
              editor.setValue(this.row.cron_script); // 设置编辑器内容
              editor.setFontSize(15); //字体大小
              editor.gotoLine(1); //去掉蓝色背景
              editor.on('change', () => {
                this.row.cron_script = editor.getValue(); // 当编辑器内容变化时，更新 form.shell 字段
              });
          },
          // 获取主机
          getServer() {
              this.$http.get('/cmdb/server/')
                .then(res => {
                    this.server = res.data.data;
                })
           },
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                this.$http.put('/task/cron/' + this.row.id + '/', this.row)
                  .then(res => {
                    if (res.data.code === 200){
                      this.$message.success('修改成功');
                      this.dialogClose()  // 关闭窗口
                    }
                  })
              } else {
                this.$message.error('格式错误！')
              }
            })
          },
        },
        // 监听打开编辑窗口
        watch: {
            visible() {
                this.getServer();
            }
       },
       updated() {
           this.initEditor();
        },
    }
</script>

<style scoped>
    .ace-editor {
      width: 100%;
      height: 150px; /* 设置编辑器高度 */
      border: 1px solid #ccc;
      /*background-color: #f0f0f0;*/
    }
</style>